<template>
	<div class="bg-white p-[40px]">
		<el-row>
			<el-col :span="6">
				<div class="main-color v-flex">
					<span>手机号</span>
					<el-input class="flex-1 ml-[30px]" disabled v-model="mobile" placeholder="请输入"></el-input>
				</div>
			</el-col>
		</el-row>
		<el-row class="mt-[20px]">
			<el-col :span="6">
				<div class="main-color v-flex">
					<span>验证码</span>
					<el-input v-model="formData.code" class="flex-1 ml-[30px] mr-[10px]"
						placeholder="请输入验证码"></el-input>
					<el-button type="primary" color="#B6D4F0"
						v-bind:disabled="codeobj.dis" class="main-color" @click="obtain">
						 <span v-if="codeobj.show">获取验证码</span>
						 <span v-else>{{codeobj.count}}秒后重新获取</span>
					</el-button>
				</div>
			</el-col>
		</el-row>
		<el-row class="mt-[20px]">
			<el-col :span="6">
				<div class="main-color v-flex">
					<span>新密码</span>
					<el-input v-model="formData.password" class="flex-1 ml-[30px]" type="password" show-password
						placeholder="请输入新密码"></el-input>
				</div>
			</el-col>
		</el-row>
		<el-row class="mt-[20px]">
			<el-col :span="6">
				<div class="main-color v-flex">
					<span>确认密码</span>
					<el-input v-model="formData.password_confirm" class="flex-1 ml-[16px]" type="password" show-password
						placeholder="请再次输入新密码"></el-input>
				</div>
			</el-col>
		</el-row>
		<el-button class="w-[100px] h-[36px] mt-[30px]" color="#0054A6" type="primary" @click="setPassword">保存</el-button>
	</div>
</template>

<script lang="ts" setup>
	import useUserStore from '@/stores/modules/user'
	import feedback from '@/utils/feedback' 
	import { sendCode ,editPassword } from '@/api/basicSettings'
	const mobile = ref({})//手机号
	// 表单数据
	const formData = reactive({
		code: '',//验证码
		password: '', // 新的密码
		password_confirm: '' // 确定密码
	})
	const userStore = useUserStore()
	// 获取个人设置
	const getUser = async () => {
		const userInfo = userStore.userInfo
		mobile.value = userInfo.mobile
	}
	// 设置密码
	const setPassword = async () => {
		if (formData.code == '') {
			return feedback.msgError('请输入验证码')
		}
		if (formData.password == '') {
			return feedback.msgError('请输入新的密码')
		}
		
		if (formData.password_confirm == '') {
			return feedback.msgError('请输入确认密码')
		}
		
		if (formData.password_confirm != formData.password) {
			return feedback.msgError('两次输入的密码不一样')
		}
		if (formData.password.length < 6 || formData.password.length > 32) {
			return feedback.msgError('密码长度在6到32之间')
		}
		if (formData.password_confirm.length < 6 || formData.password_confirm.length > 32) {
			return feedback.msgError('密码长度在6到32之间')
		}
		await editPassword(formData).then(res => {
			// 退出登录
			userStore.logout()
		})
	}
	getUser()
	// 验证码
	let codeobj = reactive({
		dis: false,
		show: true,
		timer: null, //设置计时器,
		count: ""
	});
	//点击获取验证码：
	const obtain = () => {
		let mins = 60
		sendCode({mobile:mobile.value,scene:'CZDLMM'}).then(res=>{
			if (!codeobj.timer) {
				codeobj.count = mins;
				codeobj.show = false;
				codeobj.dis = true;
				codeobj.timer = setInterval(() => {
					if (codeobj.count > 0 && codeobj.count <= mins) {
						codeobj.count--;
					} else {
						codeobj.dis = false;
						codeobj.show = true;
						clearInterval(codeobj.timer);
						codeobj.timer = null;
					}
				}, 1000);
			
			}
		})
	}
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label {
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}

	.el-set-form:deep() .el-input__inner {
		height: 36px;
	}

	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}

	.el-tabs__item.is-active {
		color: var(--el-text-color-main);
		font-weight: bold;
	}

	.el-tabs__nav-wrap::after {
		background-color: #F5F5F5;
	}

	.el-tabs__active-bar {
		background-color: var(--el-text-color-main);
	}
</style>